<template>
  <ul class='more-menu first-box'>
    <li v-for="item in menuData" class="pr btn-active" @click="gotoThis(item)">
      <img :src="item.img" alt="">
      <div class="pa">
        <p class="title">【{{item.title}}】</p>
        <p class="content">{{item.content}}</p>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      menuData:[
        {
          img:require("../../assets/img/more/1.png"),
          title:"一键救援",
          content:"随时随地，为您保驾护航",
          url:"/more/help",
        },{
          img:require("../../assets/img/more/2.png"),
          title:"周边服务",
          content:"停车场，加油站，4s点...",
          url:"/more/serve",
        }
      ]
    };
  },
  methods: {
    gotoThis(item){
      if(!item.url){
        this.$store.state.dialogs.alert.content=item.title+" 正在升级中，请等待"
        this.$store.state.dialogs.alert.show=true
      }
      this.$router.push(item.url)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.more-menu {
  padding: 15px;

  li{
    margin-bottom: 15px;

    img{
      width: 100%;
    }

    >div{
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      color: #fff;

      .title{
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 5px;
      }
      .content{
        font-size: 12px;
      }
    }
  }
}
</style>